<template>
  <div v-if="showConfig" class="searchBar">
    <a-row>
      <a-col :flex="1">
        <a-form :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }" label-align="left">
          <a-row :gutter="16">
            <template v-for="(value, index) in showConfig" :key="index">
              <a-col :span="8">
                <a-form-item :label="value.label">
                  <a-input v-model="value.value" :placeholder="value.placeholder" @keyup.enter="tapConditional" />
                </a-form-item>
              </a-col>
            </template>
          </a-row>
        </a-form>
      </a-col>
      <a-divider style="height: 84px" direction="vertical" />
      <a-col :flex="'86px'" style="text-align: right">
        <a-space direction="vertical" :size="18">
          <a-button type="primary" @click="search">
            <template #icon>
              <icon-search />
            </template>
            搜索
          </a-button>
          <a-button @click="reset">
            <template #icon>
              <icon-refresh />
            </template>
            重置
          </a-button>
        </a-space>
      </a-col>
    </a-row>
    <a-divider style="margin-top: 0" />
  </div>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importConfig from './searchBar';
export default {
  props: {
    config: {
      default: [],
      type: Array<any>,
      required: true,
    },
  },
  /**
   * @exports update:config 更新数据
   * @exports tapDate       触发查询方法
   */
  emits: ['update:config', 'tapDate'],
  setup(props, emits) {
    const { base, init, tapConditional, reset } = importConfig(props, emits);
    init();
    return {
      ...toRefs(base),
      tapConditional,
      reset,
    };
  },
};
</script>

<style scoped lang="less">
.searchBar {
}
</style>
